<template>
	<view class="content">
		<!-- 自动控制 -->
		<view v-if="auto" class="autoControl-on">
			<view class="autoText">
				<text>自动控制</text>
			</view>
			<view class="autoSwitch">
				<switch color="#d1f2d7"
					:checked="auto" @change="autoControl" />
			</view>
		</view>
		<view v-else class="autoControl-off">
			<view class="autoText">
				<text>自动控制</text>
			</view>
			<view class="autoSwitch">
				<switch :checked="auto" @change="autoControl" />
			</view>
		</view>

		<!-- 详细设置页面 -->
		<view v-if="auto"></view>
		<view v-else class="Control">
			<!-- 水泵挡位设置页面 -->
			<u-row>
				<u-list height="100%"> <!-- 不知为何加上height可以实现自定义高度-->
					<u-list-item>
						<u-cell title="水泵">
							<u-switch activeColor="#8cde9b"
								slot="right-icon" v-model="pump" @change="changePump"></u-switch>
						</u-cell>
					</u-list-item>
				</u-list>
			</u-row>
			<!-- 设置详细页面 -->
			<u-row>
				<view v-if="pump" class="details">
					
					<view class="picker">
						<view>
							<picker @change="pumpChange" :value="pumpIndex" :range="pumpArray" range-key="name">
								<view class="uni-input">{{pumpArray[pumpIndex]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</u-row>

			<!-- 灯泡设置页面 -->
			<u-row>
				<u-list height="100%">
					<u-list-item>
						<u-cell title="灯泡">
							<u-switch activeColor="#8cde9b"
								slot="right-icon" v-model="light" @change="changeLight"></u-switch>
						</u-cell>
					</u-list-item>
				</u-list>
			</u-row>

			<!-- 风扇页面 -->
			<u-row>
				<u-list height="100%">
					<u-list-item>
						<u-cell title="风扇">
							<u-switch activeColor="#8cde9b"
								slot="right-icon" v-model="fan" @change="changeFan"></u-switch>
						</u-cell>
					</u-list-item>
				</u-list>
			</u-row>
			<u-row>
				<view v-if="fan" class="details"> <!-- 设置详细页面 -->
					
					<view class="picker">
						<view>
							<picker @change="fanChange" :value="fanIndex" :range="fanArray" range-key="name">
								<view class="uni-input">{{fanArray[fanIndex].name}}</view>
							</picker>
						</view>
					</view>
				</view>
			</u-row>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//自动控制状态
				auto: false,
				//设备状态
				light: false,
				fan: false,
				pump: false,

				//水泵挡位
				pumpIndex: 0,
				pumpArray: ['1档', '2档', '3档'],
				/* 风扇挡位 */
				fanIndex: 0,
				fanArray: [{
						name: '1档'
					},
					{
						name: '2档'
					},
					{
						name: '3档'
					}
				],
			}
		},
		onShow() {
			let that = this;
			//请求自动控制状态并赋值给auto 开true关false 请求设备状态赋值给fan light pump 风扇，灯 泵
			uni.request({
				url: 'http://192.168.5.3:9091/api/getDeviceState ',
				success(res) {
					console.log(res.data)
					//根据状态数据显示初始状态
					if (res.data.Auto) {
						that.auto = true;
					} else {
						that.auto = false;
					}
					console.log(that.auto);


					if (res.data.Fan) {
						that.fan = true;
						that.fanIndex = res.data.Fan; - 1;
					} else {
						that.fan = false;
						that.fanIndex = 0;
					}

					if (res.data.Pump) {
						that.pump = true;
						that.pumpIndex = res.data.Pump - 1;
					} else {
						that.pump = false;
						that.pumpIndex = 0;
					}

					if (res.data.Light) {
						this.light = true;
					} else {
						this.light = false;
					}

					console.log(that.fanIndex + " " + that.pumpIndex + " " + this.light);

				}
			});
		},
		methods: {
			getData() {
				let that = this;
					setTimeout(() => {
						uni.request({
							url: 'http://192.168.5.3:9091/api/getDeviceState ',
							success(res) {
								console.log("发送确认请求");
								//根据状态数据显示初始状态
								if (res.data.Auto) {
									that.auto = true;
								} else {
									that.auto = false;
								}
								
								if (res.data.Fan) {
									that.fan = true;
									that.fanIndex = res.data.Fan; - 1;
								} else {
									that.fan = false;
									that.fanIndex = 0;
								}
										
								if (res.data.Pump) {
									that.pump = true;
									that.pumpIndex = res.data.Pump - 1;
								} else {
									that.pump = false;
									that.pumpIndex = 0;
								}
										
								if (res.data.Light) {
									that.light = true;
								} else {
									that.light = false;
								}
										
								console.log(that.fanIndex + " " + that.pumpIndex + " " + that.light + " " + that.auto);
							},
						});
					},2000);
			},
			
			autoControl(e) {
				this.auto = e.detail.value;
				let a = e.detail.value ? 1 : 0;
				console.log("自动控制:" + a);
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					url: 'http://192.168.5.3:9091/api/app/setAuto',
					method: 'POST',
					data: {
						auto: a,
					},
					success(res) {
						//成功代码
						if( a == 1 )
							uni.showToast({
								title:"自动控制开启",
								image:'/static/image/autoOn.png',
								duration: 1000
							});
						else
							uni.showToast({
								title:"自动控制关闭",
								duration: 1000,
								image:'/static/image/autoOff.png',
							})
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});	
			},

			changePump() {
				console.log(this.pump);
				let a = 0;
				if (this.pump) {
					a = 1;
					this.pumpIndex = a - 1;
				}
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setPump?device=1',   // device=1   为水泵
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=1',
					method: 'POST',
					data: {
						state: a,
					},
					success(res) {
						//成功代码
						console.log("水泵成功改为" + a + "挡");
						if( a )
							uni.showToast({
								title: "水泵切换至" + a + "挡",
								image:"/static/image/pump.png"
							});
						else
							uni.showToast({
								title: "水泵关闭",
								image:"/static/image/pump.png"
							});
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
			},
			pumpChange(e) {
				this.pumpIndex = e.detail.value;
				let temp = e.detail.value + 1;
				uni.request({
					// url: 'http://192.168.5.3:9091/api/app/setPump?device=1',
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=1',
					method: 'POST',
					data: {
						state: temp,
					},
					success(res) {
						//成功代码
						console.log("水泵成功改为" + temp + "挡");
						uni.showToast({
							title: "水泵切换至" + temp + "挡",
							image:"/static/image/pump.png"
						});
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
			},

			changeLight() {
				console.log(this.light);
				let a = 0;
				if (this.light) {
					a = 1;
				}
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setLight',
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=2',  //device=2为灯泡
					method: 'POST',
					data: {
						state: a,
					},
					success(res) {
						//成功代码
						console.log("灯成功改为" + a + "挡");
						if(a){
							uni.showToast({
								title: "灯光开启",
								image:"/static/image/light.png"
							});
						}else{
							uni.showToast({
								title: "灯光关闭",
								image:"/static/image/light.png"
							});
						}
					},fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
			},
			//风扇开关
			changeFan() {
				console.log(this.fan);
				let a = 0;
				if (this.fan) {
					a = 1;
					this.fanIndex = a - 1;
				}
				uni.request({
					//发出修改状态请求，如果成功则POST修改状态，否则不变
					// url: 'http://192.168.5.3:9091/api/app/setFan',
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=3', //device=3为风扇
					method: 'POST',
					data: {
						state: a,
					},
					success(res) {
						//成功代码
						console.log("风扇成功改为" + a + "挡");
						if(a){
							uni.showToast({
								title: "风扇启动为1挡",
								image:"/static/image/fan.png"
							});
						}else{
							uni.showToast({
								title: "风扇已关闭",
								image:"/static/image/fan.png"
							});
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:"error",
						})
					}
				});
				this.fanIndex = 0;
			},
			
			//设置风扇挡位
			fanChange(e) {
				this.fanIndex = e.detail.value;
				let temp = e.detail.value + 1;
				uni.request({
					// url: 'http://192.168.5.3:9091/api/app/setFan',
					url: 'http://192.168.5.3:9091/api/app/setControlLevel?device=3', //device=3为风扇
					method: 'POST',
					data: {
						state: temp,
					},
					success(res) {
						//成功代码
						console.log("风扇成功改为" + temp + "挡");
						uni.showToast({
							title: "风扇切换至" + temp + "挡",
							image:"/static/image/fan.png"
						});
					}
				});
			},
		},
		onHide() {
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		float: left;
	}

	.autoControl-on {
		width: 80%;
		height: 80px;
		margin: 10% 10% 0% 10%;
		border-radius: 10rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		background-color: #18bc37;
		float: inherit;
		
	}
	
	.autoControl-off {
		width: 80%;
		height: 80px;
		margin: 10% 10% 0% 10%;
		border-radius: 10rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		background-color: #8cde9b;
		float: inherit;
		
	}

	.autoText {
		height: 100%;
		width: 50%;
		text-align: center;
		float: inherit;
		color: #FFFFFF;
		font-size: calc(50rpx);
		display:flex;
		flex-direction:column;
		 align-items: center; /*垂直居中 */
		justify-content: center;/*水平居中*/
	}

	.autoSwitch {
		height: 100%;
		width: 50%;
		float: inherit;
		color: #FFFFFF;
		font-size: calc(50rpx);
		display:flex;
		flex-direction:column;
		align-items: center;/*垂直居中*/
		justify-content: center;/*水平居中*/
	}

	.Control {
		width: 80%;
		margin: 0% 10% 10% 10%;
		border-radius: 10rpx;
		/* box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15); */
		float: inherit;
		background-color: #d1f2d7;
	}

	.details {
		width: 100%;
		flex-direction: column;
	}

	/* .details_video {
		width: 36%;
		height: 96%;
		margin: 0px;
		float: left;
		font-size: calc(40rpx);
		background-color: aqua;
		display: flex;
		flex-direction: column;
		align-items: center;//垂直居中
		justify-content: center;//水平居中
	} */

	.picker {
		width: 100%;
		height: 100%;
	}

	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #b0d1aa;
	}
</style>